<template>
	<div>
		<div v-if="orderList.length==0">
			<van-empty class="custom-image" style="margin-top: 5rem;" image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
				description="暂时没有数据" />
		</div>
		<div class="order-list" v-else>
			<div class="card-item" v-for="(order, i) in orderList" :key="i">
				<van-cell class="card-header" :title="`订单ID：${order.id}`">
					<template #default>
						<span>{{orderStatus(order)}}</span>
						<span v-if="order.status==0" @click="onClickOrderCancel(order.id)"> | 取消订单</span>
					</template>
				</van-cell>
				<van-row v-for="item in order.detailList" :key="item.id" @click="onClick2OrderDetail(order.id)">
					<van-col span="6">
						<van-image :src="APIDomainName + item.product_pic" radius="20%"></van-image>
					</van-col>

					<van-col span="18">
						<van-cell style="font-size: 18px;font-weight: bold;" :title="item.product_name"
							class="van-ellipsis">
						</van-cell>
						<van-row style="padding-left: 20px;text-align: right;" type="flex" justify="space-between">
							<van-col span="20" class="detail"
								style="font-size: 14px;color: #bcbcbc;white-space: wrap;overflow: hidden;text-overflow: ellipsis;height: 2.5rem;">
								{{item.detail}}</van-col>
							<van-col span="4">￥{{item.nowprice *1 }}</van-col>
						</van-row>
					</van-col>
				</van-row>
				<div class="amount">
					实付金额：
					<span style="color:red">¥{{ orderAmount(order) }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getOrderListAPI,
		cancleOrderByIdAPI
	} from "@/api/order.js";

	export default {
		data() {
			return {
				orderList: [],
			};
		},
		//生命周期钩子函数
		created() {
			this.getOrderList();
		},

		methods: {
			//获取订单列表
			getOrderList() {
				getOrderListAPI().then(result => {
					this.orderList = result.data;
				});
			},
			// 触发导航到订单详情（此时该路由功能还没有实现）
			onClick2OrderDetail(id) {
				this.$router.push({
					name: "orderDetail",
					params: {
						id
					}
				});
			},
			// 触发取消订单
			onClickOrderCancel(id) {
				cancleOrderByIdAPI(id).then(() => {
					this.initOrderList();
				});
			},
			//计算一个订单的总金额
			orderAmount(order) {
				let amount = 0;
				order.detailList.forEach(item => {
					amount += 1 * item.nowprice;
				});
				return amount.toFixed(2);
			},
			//订单状态格式转换
			orderStatus(order) {
				let status = "未知";
				switch (order.status) {
					case 0:
						status = "未支付";
						break;
					case 1:
						status = "已支付";
						break;
					case -1:
						status = "已取消";
						break;
				}
				return status;
			},
		},
	};
</script>

<style lang="less" scoped>
	.order-list {
		// background-color: #f3f3f3;
		padding: 0 0 10px 0;
	}

	.card-item {
		margin: 20px;
		padding: 10px;
		background-color: white;
		border-radius: 10px;
		font-size: 16px;
		box-shadow: 0px 2px 10px #C8C9CC;
	}

	.card-header {
		padding: 5px 5px;
		font-size: 16px;
		font-weight: bolder;
		display: flex;
		justify-content: space-between;

		::v-deep .van-cell__value {
			color: #070100;
		}
	}

	.amount {
		border-radius: 10px;
		padding: 5px 5px;
		text-align: right;
		color: #6b6969;
		font-weight: bold;
		background-color:rgba(1, 203, 226, 0.3);
		margin-top: 0.5rem;
	}

	.van-row--justify-space-between {
		margin-top: 1rem;
	}
	.custom-image .van-empty__image {
		width: 50px;
		height: 50px;
		margin-top: 5rem;
	}
</style>
